/*
 * QML对话框示例程序
 * 展示了多种不同类型的对话框实现方式
 * 包括基础对话框、登录对话框、设置对话框和自定义按钮对话框
 */
import QtQuick 2.15  // 导入QtQuick模块，用于构建用户界面
import QtQuick.Controls 2.15  // 导入QtQuick.Controls模块，提供各种UI控件
import QtQuick.Layouts 1.15  // 导入QtQuick.Layouts模块，提供布局管理功能
import QtQuick.Window 2.15  // 导入QtQuick.Window模块，提供窗口相关功能

ApplicationWindow {
    id: window  // 窗口对象的唯一标识符

    width: 800  // 窗口宽度
    height: 600  // 窗口高度
    visible: true  // 窗口可见性
    title: qsTr("对话框示例")  // 窗口标题

    // 基础对话框按钮
    Button {
        text: qsTr("打开基础对话框")  // 按钮显示文本
        anchors.left: parent.left  // 左侧对齐父容器
        anchors.leftMargin: 100  // 左侧边距
        anchors.top: parent.top  // 顶部对齐父容器
        anchors.topMargin: 100  // 顶部边距
        // 居中显示
        // anchors.centerIn: parent
        onClicked: {
            basicDialog.open();  // 点击按钮时打开基础对话框
        }
    }

    // 基础对话框定义
    Dialog {
        id: basicDialog  // 对话框的唯一标识符

        title: qsTr("基础对话框")  // 对话框标题
        anchors.centerIn: parent  // 在父容器中居中
        modal: true  // 模态对话框
        standardButtons: Dialog.Ok | Dialog.Cancel  // 标准按钮
        x: (window.width - width) / 2  // 水平居中位置
        y: (window.height - height) / 2  // 垂直居中位置
        onAccepted: console.log("用户点击了确定")  // 点击确定时的回调
        onRejected: console.log("用户点击了取消")  // 点击取消时的回调

        ColumnLayout {
            width: parent.width

            Label {
                text: qsTr("这是一个基础对话框")  // 对话框内容文本
                Layout.fillWidth: true  // 填充可用宽度
            }

        }

    }

    // 右侧按钮列
    Column {
        anchors.left: parent.left  // 左侧对齐父容器
        anchors.leftMargin: 300  // 左侧边距
        anchors.top: parent.top  // 顶部对齐父容器
        anchors.topMargin: 100  // 顶部边距
        spacing: 20  // 按钮间距

        Button {
            text: "登陆对话框"  // 按钮显示文本
            onClicked: {
                loginDialog.open();  // 点击按钮时打开登录对话框
            }
        }

        Button {
            text: "设置对话框"  // 按钮显示文本
            onClicked: {
                settingDialog.open();  // 点击按钮时打开设置对话框
            }
        }

        Button {
            text: "自定义按钮对话框"  // 按钮显示文本
            onClicked: {
                customButtonDialog.open();  // 点击按钮时打开自定义按钮对话框
            }
        }

    }

    // 登录对话框定义
    Dialog {
        id: loginDialog  // 对话框的唯一标识符

        title: "用户登录"  // 对话框标题
        modal: true  // 模态对话框
        standardButtons: Dialog.Ok | Dialog.Cancel  // 标准按钮
        x: (window.width - width) / 2  // 水平居中位置
        y: (window.height - height) / 2  // 垂直居中位置
        width: 300  // 对话框宽度
        onAccepted: {
            console.log("登陆信息：");  // 输出登录信息
            console.log("用户名：" + usernameField.text);  // 输出用户名
            console.log("密码：" + passwordField.text);  // 输出密码
            console.log("记住登陆状态：" + rememberMe.checked);  // 输出记住登录状态
        }

        ColumnLayout {
            width: parent.width

            Label {
                // Layout.fillWidth: true
                text: "用户名:"  // 用户名标签
            }

            TextField {
                id: usernameField  // 用户名输入框

                Layout.fillWidth: true  // 填充可用宽度
                placeholderText: "请输入用户名"  // 占位符文本
            }

            Label {
                text: "密码:"  // 密码标签
            }

            TextField {
                id: passwordField  // 密码输入框

                Layout.fillWidth: true  // 填充可用宽度
                placeholderText: "请输入密码"  // 占位符文本
                echoMode: TextInput.Password  // 密码输入模式
            }

            CheckBox {
                id: rememberMe  // 记住登录状态复选框

                text: "记住登陆状态"  // 复选框文本
            }

        }

    }

    // 设置对话框定义
    Dialog {
        id: settingDialog  // 对话框的唯一标识符

        title: "应用设置"  // 对话框标题
        modal: true  // 模态对话框
        standardButtons: Dialog.Ok | Dialog.Cancel  // 标准按钮
        x: (window.width - width) / 2  // 水平居中位置
        y: (window.height - height) / 2  // 垂直居中位置
        width: 400  // 对话框宽度
        onAccepted: {
            console.log("应用设置已保存");  // 输出设置保存信息
        }

        ColumnLayout {
            width: parent.width
            spacing: 20  // 布局间距

            GroupBox {
                title: "外观设置"  // 分组框标题
                Layout.fillWidth: true  // 填充可用宽度

                ColumnLayout {
                    width: parent.width

                    RowLayout {
                        width: parent.width

                        ComboBox {
                            model: ["浅色主题", "深色主题", "系统默认"]  // 主题选项
                            Layout.fillWidth: true  // 填充可用宽度
                        }

                    }

                    RowLayout {
                        Label {
                            text: "字体大小:"  // 字体大小标签
                        }

                        Slider {
                            id: fontSizeSlider  // 字体大小滑块

                            from: 10  // 最小值
                            to: 30  // 最大值
                            value: 14  // 当前值
                            Layout.fillWidth: true  // 填充可用宽度
                        }

                        Label {
                            text: Math.round(fontSizeSlider.value)  // 显示当前字体大小值
                        }

                    }

                }

            }

            GroupBox {
                title: "通知设置"  // 分组框标题
                Layout.fillWidth: true  // 填充可用宽度

                Column {
                    width: parent.width
                    spacing: 10  // 控件间距

                    CheckBox {
                        text: "启用声音通知"  // 声音通知复选框
                    }

                    CheckBox {
                        text: "启用桌面通知"  // 桌面通知复选框
                    }

                    CheckBox {
                        text: "启用邮件通知"  // 邮件通知复选框
                    }

                }

            }

        }

    }

    // 自定义按钮对话框定义
    Dialog {
        id: customButtonDialog  // 对话框的唯一标识符

        title: "自定义操作"  // 对话框标题
        modal: true  // 模态对话框
        standardButtons: Dialog.NoButton  // 不使用标准按钮
        x: (window.width - width) / 2  // 水平居中位置
        y: (window.height - height) / 2  // 垂直居中位置
        width: 400  // 对话框宽度

        ColumnLayout {
            width: parent.width

            Label {
                text: "选择一个操作："  // 对话框内容文本
                Layout.fillWidth: true  // 填充可用宽度
            }

        }

        footer: DialogButtonBox {  // 自定义底部按钮栏
            Button {
                text: "保存"  // 保存按钮
                onClicked: {
                    console.log("用户点击了保存");  // 输出保存操作信息
                    customButtonDialog.close();  // 关闭对话框
                }
            }

            Button {
                text: "删除"  // 删除按钮
                DialogButtonBox.buttonRole: DialogButtonBox.DestructiveRole  // 删除角色
                onClicked: {
                    console.log("用户点击了删除");  // 输出删除操作信息
                    customButtonDialog.close();  // 关闭对话框
                }
            }

            Button {
                text: "忽略"  // 忽略按钮
                DialogButtonBox.buttonRole: DialogButtonBox.RejectRole  // 拒绝角色
                onClicked: {
                    customButtonDialog.reject();  // 触发拒绝操作
                }
            }

            Button {
                text: "确认"  // 确认按钮  // 接受角色
                DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
                onClicked: {
                    console.log("用户点击了确认");  // 输出确认操作信息
                    customButtonDialog.accept();  // 触发接受操作
                }
            }
            Button {
                text: "关闭"  // 关闭按钮
                onClicked: {
                    console.log("用户点击了关闭");  // 输出关闭操作信息
                    customButtonDialog.close();  // 关闭对话框
                }
            }

            

        }

    }

}
